<template>
	<view class="centair">
		<view class="top">
			<image class="image" :src="img1" mode="aspectFit"></image>
		</view>
		<view class="mid">
			<view class="qrimg-i">
				<tki-qrcode  cid="qrcode1" ref="qrcode" :val="val" :onval="onval" :size="size" :unit="unit" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
			</view>
		</view>
		
		<view class="down">
			<text class="text">请保存图中二维码，邀请朋友扫描下方二维码加入我们</text>
		</view>
		
	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'  //仅H5
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				val: '', // 要生成的二维码值
				size: 300, // 二维码大小
				unit: 'upx', // 单位
				onval: true,
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' ,// 二维码生成后的图片地址或base64
				img1:'',
			}
		},
		onLoad(option){
			this.img1 = getApp().globalData.imageAddress+"/bg/invite.png";
			let count = getApp().globalData.http+ '/h5/#/pages/reg/reg?userId='+ option.id
			 this.val =count
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//创建二维码
			// creatQrcode() {
			// 	this.$refs.qrcode._makeCode()
			// },
			qrR(res) {
				this.src = res;
			},
			//保存图片地址
			// saveQrcode() {
			// },
		}
	}
</script>

<style lang="scss">
	.centair{
		text-align: center;
		.top{
			padding-top: 40upx;
			.image{
				max-height: 300upx;
			}
			
		}
			
		.qrimg-i{
			border:5upx solid #FFA847;
			position: absolute;
			padding: 40upx 40upx 30upx 40upx;
			margin: 200upx 180upx 20upx 180upx;
			background: rgba(0, 0, 0, 0.02);
		}
		
		.down{
			width: 70%;
			margin-left: 120upx;
			margin-top: 50upx;
		}
	}
</style>
